<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1.0, user-scalable=no">
	<meta content="telephone=no" name="format-detection">
	<meta content="address=no" name="format-detection">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="msapplication-tap-highlight" content="no"><!-- windows phone 点击无高光 -->
	<title>景区介绍</title>
	<!--jquery-weui -css-->
	<link rel="stylesheet" href="../assets/library/jquery-weui/dist/lib/weui.css">
	<link rel="stylesheet" href="../assets/library/jquery-weui/dist/css/jquery-weui.css">
	<!--font-awesome-css-->
	<link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css">
	<link href="http://cdn.bootcss.com/font-awesome/3.2.1/font/fontawesome-webfont.svg" rel="stylesheet">
	<!-- self-define-->
	<!--<link rel="stylesheet" href="../assets/less/auto_guide.css">-->
	<link rel="stylesheet" href="../assets/less/auto_guide.min.css">
	<!--<link rel="stylesheet" href="../assets/css/auto_guide.min.css">-->


</head>
<body ontouchstart>

<div class="wrap hasHeader hasFooter no-padding">
	<section class="mainContent scenery-spot-wrap">
		<div class="banner-panel">
			<p>景区</p>
			<img src="../assets/images/views.png" alt="">
		</div>
		<div class="area-sign spot">
			<a href="javascript:void(0)" class="spot-video">
				<div class="f-icon">
				</div>
				<div class="btn-switch on off"></div>
				<strong>边游边听</strong>
				<p class="small">详细的景点介绍讲解</p>
			</a>
		</div>
		<div class="area-sign">
			<a href="./main.html" class="guide">
				<div class="f-icon"></div>
				<div class="p-count">在线导览</div>
			</a>
			<a  href="./area-strategy-list.html" class="strategy">
				<div class="f-icon"></div>
				<div class="p-count">攻略</div>
			</a>
			<a  href="./go-here.html" class="gohere">
				<div class="f-icon"></div>
				<div class="p-count">门票</div>
			</a>
		</div>
		<!--景区详情-->
		<div class="sport-detail">
			<!--视频-音频播放-->
			<div class="audio-video">
				<!--音频播放-->
				<div id="audioPlayer" class="aplayers play-items">
					<p>音频导览</p>
					<a  class="aplayer-button pause play-btn" href="javascript:void(0)"></a>
					<div class="timebar">
						<span class="currenttime">00:00</span>
						<div class="progress">
							<div class="progress-bar"></div>
						</div>
						<span class="totaltime">00:00</span>
					</div>
				</div>
				<div id="videoPlayer" class="vplayers play-items">
					<p>视频导览</p>

					<!--poster="../assets/images/bg2.jpg"-->
					<video controls="" id="videoId" >
						<source src="../222.mp4" type="video/mp4">
					</video>
					<i id="bt-control" class="button-show"></i>
				</div>
			</div>
			<div class="channel-content">
				<p class="channel-title">景区详情</p>
				<p>12131234243253爱我服务v等人工或部分高回报和法国人的说法发给是还是还是很烦的还是 和然后带饭黄飞鸿额撒儿</p>
				<p>12131234243253爱我服务v等人工或部分高回报和法国人的说法发给是还是还是很烦的还是 和然后带饭黄飞鸿额撒儿</p>
				<img src="../assets/images/views.png" alt="">
				<p>12131234243253爱我服务v等人工或部分高回报和法国人的说法发给是还是还是很烦的还是 和然后带饭黄飞鸿额撒儿</p>
				<p>12131234243253爱我服务v等人工或部分高回报和法国人的说法发给是还是还是很烦的还是 和然后带饭黄飞鸿额撒儿</p>
				<img src="../assets/images/views.png" alt="">
			</div>
		</div>
		<!--精选随感-->
		<div   id="comment"></div>
		<div class="fine-comments">
			<div class="cts-title">
				<div class="cts-txt">评论 500</div>
			</div>
			<div class="cts-content">
				<div   class="cts-item">
					<div class="page-title">
						<div class="user-portrait">
							<img src="../assets/images/u-logo.jpg" alt="">


						</div>
						<div class="user-name">
							小土豆
							<div class="date">7-10 20:29</div>
						</div>
						<a class="thumbs-up-wrap">
							<span class="thumbs-up"></span>
							<div class="numbers">222</div></a>
						<a class="thumbs-down-wrap">
							<span class="thumbs-down"></span>
							<div class="numbers">222</div></a>
					</div>
					<a  class="txt-img" href="">
						<div class="txt-show">
							周末和朋友一起玩的，挺好玩的，就是觉得门票有点小贵哦，如果能再便宜一点就更完美了。
						</div>
						<div class="img-show">
							<img src="../assets/images/bg1.jpg" alt="">
							<img src="../assets/images/bg2.jpg" alt="">
							<img src="../assets/images/bg3.jpg" alt="">
							<img src="../assets/images/bg4.jpg" alt="">

						</div>
					</a>

				</div>
				<div   class="cts-item">
					<div class="page-title">
						<div class="user-portrait">
							<img src="../assets/images/u-logo.jpg" alt="">

						</div>
						<div class="user-name">
							小土豆
							<div class="date">7-10 20:29</div>
						</div>
						<a class="thumbs-up-wrap">
							<span class="thumbs-up"></span>
							<div class="numbers">222</div></a>
						<a class="thumbs-down-wrap">
							<span class="thumbs-down"></span>
							<div class="numbers">222</div></a>
					</div>
					<a  class="txt-img" href="">
						<div class="txt-show">
							周末和朋友一起玩的，挺好玩的，就是觉得门票有点小贵哦，如果能再便宜一点就更完美了。
						</div>
						<div class="img-show">
							<img src="../assets/images/bg1.jpg" alt="">
							<img src="../assets/images/bg2.jpg" alt="">
							<img src="../assets/images/bg3.jpg" alt="">
							<img src="../assets/images/bg4.jpg" alt="">
						</div>
					</a>

				</div>
			</div>
		</div>
	</section>
	<header class="header gradient-bg">
		<div class="title-bar">
			<div class="left-btns">
				<a href="javascript:history.back(-1)" class="white-goback">
					<span class="lt-icons"></span>
				</a>
			</div>
			<div class="right-btns">
				<a class="white-share">
					<span class=" lt-icons -mob-share-ui-button -mob-share-open"></span>
				</a>
			</div>
			<div class="page-title"></div>
		</div>
	</header>
	<footer class="footer define-footer">
		<!-- 页面底部导航菜单 -->
		<div class="footer-wrap">
			<a class="comments">
				<span class="editIcon"></span>
				<span class="write-comment">写评论</span>
			</a>
			<a class="praise">
				<div class="f-icon"></div>
				<div class="p-count">123</div>
			</a>
			<a class="collect">
				<div class="f-icon"></div>
			</a>
		</div>
		<!-- //页面底部导航菜单 -->

		<!--固定图标写游记-->
		<a href="travelNote-edit.html">
			<div class="travelNote-item-fixed">
				<p>写游记</p>
			</div>
		</a>
	</footer>
</div>
<!--MOB SHARE BEGIN-->
<div class="-mob-share-ui" style="display: none">
	<ul class="-mob-share-list">
		<li class="-mob-share-weibo"><p>新浪微博</p></li>
		<li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
		<li class="-mob-share-qzone"><p>QQ空间</p></li>
		<li class="-mob-share-qq"><p>QQ好友</p></li>
		<li class="-mob-share-renren"><p>人人网</p></li>
		<li class="-mob-share-kaixin"><p>开心网</p></li>
		<li class="-mob-share-douban"><p>豆瓣</p></li>
		<!--<li class="-mob-share-facebook"><p>Facebook</p></li>-->
		<!--<li class="-mob-share-twitter"><p>Twitter</p></li>-->
	</ul>
	<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<!--jquery-weui-js-->
<script src="../assets/library/jquery-weui/dist/lib/jquery-2.1.4.js"></script>
<script src="../assets/library/jquery-weui/dist/js/jquery-weui.js"></script>
<script src="../assets/library/jquery-weui/dist/js/city-picker.js"></script><!--城市选择组件-->
<script src="../assets/js/to-top.js"></script>
<!--audio-js-->
<!--<script src="../assets/js/Player.js"></script>-->
<!--vedio js-->
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=1375e10471cd2"></script>

<!--MOB SHARE END-->
<!--音频-->
<audio id="audioId" style="display:none;" src="../sea.mp3" autoplay></audio>

<script>
	$(function () {
		//绑定滚动条事件
		$(window).bind("scroll", function (){
			var sTop = $(window).scrollTop();
			var sTop = parseInt(sTop);
			if (sTop > 100) {
				$(".header").removeClass("gradient-bg");
				$(".left-btns>a").removeClass("white-goback").addClass("goback");
				$(".right-btns>a").removeClass("white-share").addClass("h-share");
			}
			else {
				$(".header").addClass("gradient-bg");
				$(".left-btns>a").removeClass("goback").addClass("white-goback");
				$(".right-btns>a").removeClass("h-share").addClass("white-share");
			}
		});
		//播放视频
//		$("#videoId").bind({
//			play: function () {
//				var a = $("audio")[0];
//				_self = this;
//				if (_self) {
//					if (!_self.paused) {
//						_self.play();
//						if (a) {
//							if (!a.paused){
//								a.pause();
//							}
//						}
//					} else {
//						_self.pause();
//					}
//				}
//			}
//		});
		var bt=document.getElementById('bt-control');
		var v=document.querySelector('video');
		function toggleButton(){
			if(v.paused){bt.className="button-show";}
		}
		setInterval(toggleButton,500);
		bt.onclick=function(){
			if(v.paused){
				v.play();
				bt.className="button-show button-hide";
			}else{
				v.pause();
				bt.className="button-show";
			}
		}
	});

//	播放音频
	$(function() {
		var v = document.querySelector('video');
		//更新时间进度条
		function timeupdate() {
			if (audioId.duration > 0) {
				$(".progress-bar").width((100 * audioId.currentTime / audioId.duration) + "%");
				var curr = (audioId.currentTime / 100).toFixed(2)
				$(".currenttime").text((audioId.currentTime / 100).toFixed(2));
				$(".totaltime").text((audioId.duration / 100).toFixed(2));
			}
		}
		//      自动播放音频
		window.onload=function() {
			audioId.play();
			if (!audioId.paused) {
				$('.btn-switch').removeClass('off');
				$(".play-items a.play-btn").addClass('play');
				setInterval(timeupdate,1000);
			} else {
				$('.btn-switch').addClass('off');
			}
		};

		$(".play-items a.play-btn").on("click", function () {
			if (audioId.paused) {
				$(this).addClass('play');
				$('.btn-switch').removeClass('off');
				v.pause();
				audioId.play();
			} else {
				$(this).removeClass('play');
				$('.btn-switch').addClass('off');
				audioId.pause();
			}
		});
		$('.btn-switch').on('click', function () {
			if (audioId.paused) {
				v.pause();
				$(this).removeClass('off');
				$(".play-items a.play-btn").addClass('play');
				audioId.play();
				setInterval(timeupdate, 1000);

			} else {
				audioId.pause();
				$(this).addClass('off');
				$(".play-items a.play-btn").removeClass('play');
			}
		});
	});
</script>

</body>
</html>